import React, { useState, forwardRef, useImperativeHandle } from 'react';
import { Button, Modal, Input, Radio, message } from 'antd';
// 导入接口从user.js 中
import { adduserFn, edituserFn } from '@/api/user'
// 模态框组件
const Mymodal = forwardRef((props, ref) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
      // 定义模态框标题
      const [title, setTitle] = useState('')
    // 修改受控组件
    const [currentUser, setCurrentUser] = useState({ gender: '1' });
    // 表单的修改事件  
    const onChange = (key, e) => {    
        currentUser[key] = e.target.value;
        setCurrentUser({ ...currentUser });
        console.log('currentUser', currentUser);
    };
    const showModal = () => {
        // console.log('111');
        setIsModalOpen(true);
    };
    // 点击确认按钮
    const handleOk = () => {
        console.log('点击确认');
        setIsModalOpen(false);
        // 调用添加用户接口
        // console.log(currentUser);
        if (title == '添加') {
            // 调用添加用户接口
            adduserFn(currentUser).then(res => {
                // console.log('adduser', res);
                if (res.data.errNo == 0) {
                    // 说明添加用户成功
                    // 友好提示
                    message.success('添加成功!', 1, () => {
                        // 重新请求最新的用户列表
                        props.getuserlistFn({ page: props.page })
                        // 清空输入的历史
                        setCurrentUser({ gender: '1' })
                    })
                } else {
                    message.error(res.data.errText, 1)
                }
            })
        } else if (title == '编辑') {
            // 调用编辑用户接口
            edituserFn(currentUser).then(res => {
                // console.log('编辑接口', res);
                if (res.data.errNo == 0) {
                    // 说明编辑成功
                    message.success('编辑成功!', 1, () => {
                        // 重新请求最新的用户列表
                        props.getuserlistFn({ page: props.page })
                        setCurrentUser({ gender: '1' })
                    })
                } else {
                    message.error(res.data.errText, 1)
                }
            })
        }
    };
    // 点击取消按钮
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    // 使用 useImperativeHandle  抛出当前函数组件上的数据和方法
    useImperativeHandle(ref, () => {
        return {
            isModalOpen, // 是否显示模态框
            showModal, // 控制显示和隐藏模态框方法
            setTitle,  // 修改模态框标题方法
            setCurrentUser // 修改当前模态框的currentUser 用户信息方法
        }
    })
    return (
        <Modal title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            <p>
                <Input placeholder="用户名" value={currentUser.username} onChange={(e) => onChange('username', e)} />
            </p>
            <p> <Input placeholder="密码" value={currentUser.password} onChange={(e) => onChange('password', e)} /></p>
            <p> <Input placeholder="手机号" value={currentUser.mobile} onChange={(e) => onChange('mobile', e)} /></p>
            <div>
                <Radio.Group onChange={(e) => onChange('gender', e)} value={currentUser.gender}>
                    <Radio value={'1'}>男</Radio>
                    <Radio value={'2'}>女</Radio>
                    <Radio value={'3'}>保密</Radio>
                </Radio.Group>
            </div>
            <p><Input placeholder="邮箱" value={currentUser.email} onChange={(e) => onChange('email', e)} /></p>
        </Modal>
    );
})

export default Mymodal;
